import React from 'react';
import Chart from 'react-apexcharts';

class ChartFinance extends React.Component {

    componentDidMount() {
        this.props.actions.getCostData(this.props.eventId);
    }

    totalMoney = () => {
        let money = this.getTicketListsMoney();
        this.props.state.data && this.props.state.data.map((item) => {
            money += parseInt(item.money || 0)
        });
        return money
    };

    earnMoney = () => {
        if (this.totalMoney() - this.props.state.cost_money > 0)
            return this.totalMoney() - this.props.state.cost_money;
        else return 0
    };
    getTicketListsMoney=()=>{
        let money = 0;
        this.props.ticketsList && this.props.ticketsList.map((item)=>{
            if (item.confirmed)
            money += parseInt(item.sales_number * item.price)
        });
        return money;
    };

    render() {
        const state = this.props.state;
        const labels = ['Расход', 'Прибыль'];
        const data = [this.props.state.cost_money || 0, this.earnMoney() || 0];
        const options = {
            chart: {
                height: 380,
                toolbar: {show: false},
                parentHeightOffset: 0,
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: false,
                width: 0
            },
            colors: ["#ea5454", "#4ecd7d"],
            plotOptions: {
                pie: {
                    size: 110,
                    donut: {size: '65%'},
                    expandOnClick: false
                }
            },
            legend: {
                height: 90,
                show: true,
                position: 'bottom',
                horizontalAlign: 'center',
                formatter: (seriesName, opts) => {
                    return (seriesName).toLocaleString('ru') + " " + "<span class='finances-graph-charts-price'>" + (opts.w.globals.series[opts.seriesIndex]).toLocaleString('ru') + " " + "&#8381;" + "</span>";
                },
                labels: {
                    color: '#EBEEFC',
                },
                itemMargin: {
                    horizontal: 6,
                    vertical: 3
                },
                markers: {
                    width: 37,
                    height: 12,
                    radius: 5,
                },
            },
            labels: labels,
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }],
            tooltip: {
                y: {
                    formatter: function (value) {
                        return value
                    }
                },
            }
        };

        return (
            <>
                <div className="tab-finances-costs">
                    <div className="finances-table-title">
                        <span>Расходы</span>
                    </div>
                    <div className="finances-costs-vn">
                        <div className="finances-costs-vn-tables">
                            <div className="finances-costs-table">
                                <div className="finances-costs-table-head">
                                    <span>Тип</span>
                                    <span className="finances-table-head-money">Сумма</span>
                                    <span className="finances-table-head-percent">Процент</span>
                                </div>
                                <div className="finances-costs-table-vn">
                                    {state.costs && Object.keys(state.costs).map((key) => {
                                        return <div className="finances-income-table-item" key={key}>
                                            <span>{state.costs[key].type.name}</span>
                                            <span className="finances-table-head-money">{state.costs[key].money} &#8381;</span>
                                            <span className="finances-table-head-percent">{(state.costs[key].money * 100 / (state.cost_money === 0 ? 1 : state.cost_money)).toFixed(2)}%</span>
                                        </div>
                                    })}
                                </div>
                                <div className="finances-costs-table-total">
                                    <span>итого: {state.cost_money && (state.cost_money).toLocaleString('ru')} &#8381;</span>
                                </div>
                            </div>
                            <div className="finances-income-table">
                                <div className="finances-income-table-title">
                                    <span>Доходы</span>
                                </div>
                                <div className="finances-income-table-vn">
                                    <div className="finances-income-table-item">
                                        <span>Билеты</span>
                                        <span className="finances-table-head-money">{this.getTicketListsMoney()} &#8381;</span>
                                        <span className="finances-table-head-percent">{(this.getTicketListsMoney() * 100 / (this.totalMoney() === 0 ? 1 : this.totalMoney())).toFixed(2)}%</span>
                                    </div>
                                    {state.data && state.data.map((item) => {
                                        return <div className="finances-income-table-item" key={item.id}>
                                            <span>{item.name}</span>
                                            <span className="finances-table-head-money">{item.money || 0} &#8381;</span>
                                            <span className="finances-table-head-percent">{(item.money * 100 / (this.totalMoney() === 0 ? 1 : this.totalMoney())).toFixed(2)}%</span>
                                        </div>
                                    })}
                                </div>
                                <div className="finances-costs-table-total">
                                    <span>итого: {this.totalMoney().toLocaleString('ru')} &#8381;</span>
                                </div>
                            </div>
                        </div>
                        <div className="finances-costs-vn-graph">
                            <div className="finances-graph-title-block">
                                <div className="finances-graph-title-count">
                                    <span>Подсчет</span>
                                </div>
                                <div className="finances-graph-title-income">
                                    <span>Доход</span>
                                    <span className="graph-title-income-money">{this.totalMoney().toLocaleString('ru')} &#8381;</span>
                                </div>
                            </div>
                            <div className="finances-graph">
                                <Chart
                                    options={options}
                                    series={data}
                                    type="donut"
                                    className="finances-graph-charts"
                                    height={380}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

export default ChartFinance;
